<template>
	<view class="zh-u-drawer">
		<u-mask :show="props.show" @click="handleClickMask"></u-mask>
		<view class="content display-flex flex-direction-column justify-between" 
			:class="{'active':props.show}" 
			:style="{
				width:contentWidth,
				right:props.show?0:rightWidth,
			}">
			<scroll-view class="flex top" scroll-y="true">
				<slot name="top"></slot>
			</scroll-view>
			<view>
				<slot name="bottom"></slot>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	
	const props = defineProps<{
		show?: boolean
		mode?: string
		width?: string
	}>()
	const contentWidth = uni.upx2px(Number(props.width)) + 'px'
	const rightWidth = (0-uni.upx2px(Number(props.width))) + 'px'
	const emit = defineEmits(['close'])
	const handleClickMask = () => {
		emit('close')
	}
</script>

<style lang="scss" scoped>
	.zh-u-drawer {
		// position:fixed;
		// top:var(--window-top);
		// bottom:0;
		// right:0;
		// left:0;
		// z-index:-1;
		.content {
			background-color: $uni-bg-card-color;
			z-index:2;
			position: fixed;
			right:0;
			top:var(--window-top);
			bottom:0;
			.active {
				transition: all .6s ease-out;
			}
			.top {
				min-height:800rpx;
			}
		}
	}
</style>